<template>
  <div class="count">
    <button @click="add">加上1</button>
    <button @click="minus">减去1</button>
    <p>我是计数器:{{ count }}</p>
  </div>
</template>

<script>
//配置对象
export default {
  name: "Count",
  //函数：组件可以复用，相互之前不影响数据
  data(){
    //返回对象
    return {
        count:1
    }
  },
  //组件实例的方法
  methods: { 
      //添加
      add(){
          this.count++;
      }
      ,
      //减少
      minus(){
          this.count--;
      }
  },
};
</script>

<style>
.count {
  width: 600px;
  height: 100px;
  background: pink;
  margin: 20px auto;
}

</style>